<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Create a heatmap layer</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="lib/mapbox-gl2.6.1.css" rel="stylesheet">
    <script src="lib/mapbox-gl2.6.1.js"></script>
    <script src="lib/jquery-3.6.0.min.js"></script>
    <script src='lib/mapbox-gl-language.js'></script>
    <script src="lib/dat.gui.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script>
        /** 点图层geojson，全省可做到村级 */
        mapboxgl.accessToken = 'pk.eyJ1IjoiaG91eGlleXUiLCJhIjoiY2pldjE5amU3NndzeDM5bzd5bm9ncDgycyJ9.j1F-Lgid3L5k2Abm8_xTeQ';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/dark-v10',
            center: [117.125829, 36.656704],
            zoom: 8
        });

        map.on('load', async () => {
            // Add a geojson point source.
            // Heatmap layers also work with a vector tile source.
            let ipapi = '6ql20nip.ipyingshe.net';
            let ip1 = '192.168.0.53:8080';
            let level = 'cun'
            let field = 'f176'
            let tileurl = `http://${ipapi}/geoserver/gwc/service/tms/1.0.0/rp7%3Agv_${level}_pt@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf`;

            //查询点图层数据
            let url2 = `http://${ipapi}/geoserver/rp7/ows?service=WFS&version=1.0.0&request=GetFeature&outputFormat=application/json&typeName=rp7:gv_${level}_pt&propertyName=geom,${field}&format_options=id_policy:reference_no=false`
            // let url2 = `http://${ip1}/features?fields=${field}&level=${level}&geotype=point`

            let geores = await $.getJSON(url2);
            //获取最大最小值
            let minmax = await $.getJSON(`http://${ipapi}/getminmax?field=f176&level=${level}`);
            let min = minmax.min;
            let max = minmax.max;

            /** 参数配置组件 */
            var options = {
                'title': '热力图',
                weight:1,
                weightmin: min,
                weightmax: max,
                intensity: 1,
                radius: 40,
            };
            initOptions(map, options);

            function initOptions(map, options) {
                var gui = new dat.GUI();

                gui.add(options, 'title');
                // var ctlweightmin = gui.add(options, 'weightmin').min(options.weightmin).max(options.weightmax);
                // ctlweightmin.onChange(function (value) {
                //     map.setPaintProperty('cun-heat', 'heatmap-weight', [
                //         'interpolate', ['linear'], ['get', field], options.weightmin, 0, options.weightmax, 1
                //     ])
                // });
                // var ctlweightmax = gui.add(options, 'weightmax').min(options.weightmin+1).max(options.weightmax);
                // ctlweightmax.onChange(function (value) {
                //     map.setPaintProperty('cun-heat', 'heatmap-weight', [
                //         'interpolate', ['linear'], ['get', field], options.weightmin, 0, options.weightmax, 1
                //     ])
                // });
                var ctlweight = gui.add(options, 'weight').min(0).max(1).name('人数权重');
                ctlweight.onChange(function (value) {
                    map.setPaintProperty('cun-heat', 'heatmap-weight', [
                        'interpolate', ['linear'], ['get', field], options.weightmin, 0, options.weightmax, value
                    ])
                });
                var ctlintensity = gui.add(options, 'intensity').min(0).max(10).name('总体强度');
                var ctlradius = gui.add(options, 'radius').min(0).max(100).name('热力半径');
                ctlintensity.onChange(function (value) {
                    map.setPaintProperty('cun-heat', 'heatmap-intensity', value)
                });
                ctlradius.onChange(function (value) {
                    map.setPaintProperty('cun-heat', 'heatmap-radius', value)
                });
            }

            map.addSource('ptsource', {
                'type': 'geojson',
                'data': geores
            });

            map.addLayer(
                {
                    'id': 'cun-heat',
                    'type': 'heatmap',
                    'source': 'ptsource',
                    // "source-layer": `gv_${level}_pt`,
                    // 'maxzoom': 9,
                    'paint': {
                        // Increase the heatmap weight based on frequency and property magnitude
                        'heatmap-weight': [
                            'interpolate',
                            ['linear'],
                            ['get', field],
                            options.weightmin,
                            0,
                            options.weightmax,
                            options.weight
                        ],
                        // Increase the heatmap color weight weight by zoom level
                        // heatmap-intensity is a multiplier on top of heatmap-weight
                        'heatmap-intensity': options.intensity,
                        // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
                        // Begin color ramp at 0-stop with a 0-transparancy color
                        // to create a blur-like effect.
                        'heatmap-color': [
                            'interpolate',
                            ['linear'],
                            ['heatmap-density'],
                            0,
                            'rgba(33,102,172,0)',
                            0.2,
                            'rgb(103,169,207)',
                            0.4,
                            'rgb(209,229,240)',
                            0.6,
                            'rgb(253,219,199)',
                            0.8,
                            'rgb(239,138,98)',
                            1,
                            'rgb(178,24,43)'
                        ],
                        // Adjust the heatmap radius by zoom level
                        'heatmap-radius': options.radius,
                        // Transition from heatmap to circle layer by zoom level
                        'heatmap-opacity':1
                        // [
                        //     'interpolate',
                        //     ['linear'],
                        //     ['zoom'],
                        //     15,
                        //     1,
                        //     16,
                        //     0
                        // ]
                    }
                },
            );

            // map.addLayer(
            //     {
            //         'id': 'cun-point',
            //         'type': 'circle',
            //         'source': 'ptsource',
            //         // "source-layer": `gv_${level}_pt`,
            //         'minzoom': 7,
            //         'paint': {
            //             // Size circle radius by earthquake magnitude and zoom level
            //             'circle-radius': [
            //                 'interpolate',
            //                 ['linear'],
            //                 ['zoom'],
            //                 7,
            //                 ['interpolate', ['linear'], ['get', field], 1, 1, max, 4],
            //                 16,
            //                 ['interpolate', ['linear'], ['get', field], 1, 5, max, 50]
            //             ],
            //             // Color circle by earthquake magnitude
            //             'circle-color': [
            //                 'interpolate',
            //                 ['linear'],
            //                 ['get', field],
            //                 1,
            //                 'rgba(33,102,172,0)',
            //                 2,
            //                 'rgb(103,169,207)',
            //                 3,
            //                 'rgb(209,229,240)',
            //                 4,
            //                 'rgb(253,219,199)',
            //                 5,
            //                 'rgb(239,138,98)',
            //                 6,
            //                 'rgb(178,24,43)'
            //             ],
            //             'circle-stroke-color': 'white',
            //             'circle-stroke-width': 1,
            //             // Transition from heatmap to circle layer by zoom level
            //             'circle-opacity': [
            //                 'interpolate',
            //                 ['linear'],
            //                 ['zoom'],
            //                 7,
            //                 0,
            //                 8,
            //                 1
            //             ]
            //         }
            //     },
            //     'waterway-label'
            // );
        });
    </script>

</body>

</html>